html, body {
    margin: 0;
    width: 100%;
    height: 100%;
}

body {
    --ttheme: linear-gradient(45deg, #ff1f62, #a236fa);
    --theme: yellowgreen;
    --partScale: 22;
    --showClothes: none;
    --showBody: block;
    font-size: 2.3vmin;
}

* {
    transition: .2s background-color;
    touch-action: pan-x;
}

body>div {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    width: 100%;
    height: 100%;
    position: relative;
}

body>div>div {
    width: 100%;
}

/*显示参考图片*/

#pictureViewer {
    width: 50vw;
    height: 30vh;
    position: absolute;
    left: 0;
    top: 0;
    background-color: white;
    background-repeat: no-repeat;
    margin: 15px;
    border-radius: 10px;
    box-shadow: 0 0 10px -5px black;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transform-origin: left top;
}

#pictureViewer>div {
    color: black;
    font-size: 150%;
    position: absolute;
    text-align: center;
}

#pictureViewer>canvas {
    position: absolute;
}

#pictureViewer[zoom] {
    transform: scale(1.4, 1.4);
}

/*头部*/

#headbar {
    position: absolute;
    top: 0;
    border-bottom: 3px solid rgb(120, 255, 138);
}

#headbar, #footbar {
    width: 100%;
    flex: 0 0 auto;
    background: var(--theme);
    min-height: 2.3cm;
    height: 10vh;
    display: flex;
    align-items: center;
    overflow-x: scroll;
    overflow-y: hidden;
}

#colorbar {
    width: 100%;
    height: 10vh;
    background-color: #eee;
    height: 13vh;
}

#colorbar>div {
    width: 100%;
    height: 50%;
    display: flex;
    overflow-x: scroll;
    overflow-y: hidden;
}

#template::before {
    content: '';
    width: 20px;
    height: 2px;
    background-color: var(--theme);
    position: absolute;
    bottom: 0;
    left: 0;
}

pen-block {
    display: block;
    text-align: center;
    width: 1cm;
    height: 1cm;
    border-radius: 100%;
    margin: 5px;
    font-size: 1em;
    flex: 0 0 auto;
}

@keyframes headbar_hide {
    to {
        transform: translateY(-100%);
    }
}

/*第二个头部*/

#head2 {
    display: block;
    height: 10vmin;
}

#skinName {
    float: left;
    padding: 1.6vmin;
    border-radius: 2px;
    margin: 5px;
    background-color: #f3f3f3;
    color: #525252;
    font-weight: bold;
    min-width: 3em;
    text-align: center;
    font-size: 120%;
}

#undoandredo {
    float: right;
    padding: 1.6vmin;
    height: 7vmin;
}

#undoandredo>img {
    height: 100%;
    border-radius: 100cm;
}

#undoandredo>img:active {
    background-color: var(--theme);
}

/*中间*/

#middle {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
}

#palettePannel {
    width: 40vw;
    max-width: 6cm;
    height: 100%;
    position: absolute;
    background-color: #f3f3f3;
    border-right: 3px solid #aaa;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1.2em;
    z-index: 1;
}

#palettePannel>* {
    width: 90%;
    margin: 5px 0;
}

#palettePannel>button {
    margin-top: 15px;
}

#palettePannel>div:first-child {
    position: absolute;
    left: 0;
    bottom: 0;
    writing-mode: vertical-rl;
    height: 100;
    color: dimgray;
    width: min-content;
}

#palettePannel>input {
    margin: 10px 0;
}

input[type=color] {
    height: 10vh;
    padding: 0;
}

input[type=range] {
    width: 70%;
    background-color: #7e7e7e;
    -webkit-appearance: none;
    height: 8px;
    border-radius: 4px;
    box-shadow: 0 0 15px -10px black inset;
}

input[type=range]:focus {
    outline: none;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    /*清除默认样式*/
    height: 20px;
    width: 10px;
    border-radius: 1000cm;
    border: 1px solid gray;
    background: white;
    position: relative;
    top: -70%;
    --margin-top: -5.5px;
    /*使用position的话会导致滑块不滑动,但是绑定的value是改变的,所以这里使用margin-top去做定位*/
}

input[type=range]::-webkit-slider-runnable-track {
    height: 8px;
}

@keyframes leftUI_hide {
    to {
        transform: translateX(-100%);
    }
}

#leftBar, #rightBar {
    width: 10vw;
    min-width: 1cm;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    border-radius: 100cm;
    padding: 20px 0;
    overflow-x: hidden;
}

#leftBar {
    background: var(--theme);
    margin-left: 1vw;
}

#leftBar img[sele=true] {
    background: #ffffff80;
}

#scene {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    perspective: 500px;
    height: 100%;
    flex: 1 1 auto;
}

#rightBar {
    margin-right: 1vw;
}

#rightBar>* {
    margin: 5px 0;
}

/*人偶*/

#human {
    transform-style: preserve-3d;
    position: absolute;
    top: 50%;
}

#human[showWhole=false]>*:not([showPart=true]) {
    transform: scale3d(0, 0, 0) !important;
}

#human[showWhole=false]>[showPart=true] {
    transform: scale3d(var(--partScale), var(--partScale), var(--partScale)) !important;
}

#human[showWhole=false]>[showPart=true][isClothes] {
    --m: calc(1.05 * var(--partScale));
    transform: scale3d(var(--m), var(--m), var(--m)) !important;
}

#human[showWhole=false]>:not([isClothes]) {
    display: var(--showBody);
}

/*
#human>div {
    backface-visibility: hidden;
}
*/

.cube3d {
    image-rendering: pixelated;
    transition: .2s all linear;
}

.cube3d>* {
    transition: .2s transform;
}

.cube3d[isClothes] {
    display: var(--showClothes);
}

/*小按钮*/

.icon {
    height: 100%;
    flex: 0 0 auto;
    width: 10vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 12px;
    position: relative;
}

.icon>img, .icon>._img {
    position: relative;
    background-color: #ffffff80;
    border-radius: 10px;
    flex: 0 0 8px;
    height: 70%;
    width: auto;
    margin: 4%;
    transition: background-color .2s;
}

.icon>._img>img {
    height: 100%;
}

.icon>._img>._triangle {
    border: 1.5vmin solid;
    border-color: dimgray dimgray transparent transparent;
    position: absolute;
    top: 0;
    right: 0;
}

st-btn>img:active {
    background-color: #ffffffc0;
}

.icon>div {
    flex: 1 1 1px;
    text-align: center;
    color: white;
    text-shadow: black 0 0 2px;
    white-space: nowrap;
}

draw-tool>._mode {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background-color: #22222270;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 200%;
    animation-duration: .01s;
    animation-timing-function: linear;
}

@keyframes modeHide {
    to {
        opacity: 0;
    }
}

draw-tool>.mode[Hiding] {
    animation-duration: 1.5s;
}

/*侧边栏按钮*/

body-part, view-opt {
    flex: 0 0 auto;
    width: 10vmin;
    height: 10vmin;
    display: flex;
    justify-content: center;
    margin: 0 3px;
}

body-part>img, view-opt>img {
    width: 100%;
    border-radius: 100cm;
}